<template>
    <div class="tmsg-respond">
        <h3>发表评论
        <small v-show="isRespond" class="tcolorm" @click="removeRespond">取消回复</small>
        <small v-show="value" class="tcolorm" @click="clear">清空</small></h3>
        <form>
            <el-input
                :id="id"
                type="textarea"
                :placeholder="placeholder"
                v-model="content"
                @input="inputChange"
                :maxlength="maxlength"
                show-word-limit>
            </el-input>
            <div :class="pBody?'OwO':'OwO OwO-open'">
                <div class="OwO-logo" @click="pBody=!pBody">
                    <span>OwO表情</span>
                </div>
                <div class="OwO-body">
                    <ul class="OwO-items OwO-items-show">
                        <li class="OwO-item" v-for="(oitem,index) in OwOlist" :key="'oitem'+index" :title="oitem.title" @click="choseMyEmoji(oitem.title)">
                            <img 
                            style="width: 22px; height: 22px; margin-left: 0"
                            :src="'static/img/emot/image/'+oitem.url" 
                            :alt="oitem.title">
                        </li>
                    </ul>
                    <div class="OwO-bar">
                        <ul class="OwO-packages">
                            <li class="OwO-package-active">Emoji</li>
                        </ul>
                    </div>
                </div>
            </div>
            <el-row class="tmsg-r-info">
                <el-col :span="24" class="info-submit">
                    <p class="tcolors-bg" @click="sendMsg()">{{sendTip}}</p>
                </el-col>
            </el-row>
        </form>
    </div>
</template>

<script>
import { getToken } from '../utils/auth.js'
import { MessageBox } from 'element-ui'
import router from '@/router'

export default {
    name: 'sendComment',
    props: {
        /* 评论内容 */
        value: {
            type: String
        },
        /* 评论内容最大长度 */
        maxlength: {
            type: Number,
            default: 300
        },
        /* input框提示 */
        placeholder: {
            type: String,
            default: '文明评论，友善发言``'
        },
        /* 发送评论方法 */
        sendComment: {
            type: Function,
            default: undefined
        },
        /* 发送评论后回调 */
        callBack: {
            type: Function,
            default: undefined
        },
        /* id */
        id: {
            type: String,
            default: 'rootInput'
        },
        /* 显示取消回复 */
        isRespond: {
            type: Boolean,
            default: false
        },
        /* 取消回复回调 */
        removeRespond: {
            type: Function,
            default: undefined
        }
    },
    data() {
        return {
            pBody: true,//表情打开控制
            content: '',
            sendTip:'发送~',
            OwOlist: this.$store.state.OwOlist
        }
    },
    watch: {
        value(newVal) {
            this.content = newVal;
        }
    },
    methods: {
        inputChange(e) {
            this.$emit("input", this.content);
        },
        choseMyEmoji(inner) {   // 选择表情包
            this.$emit('choseMyEmoji', '[' + inner + ']');
        },
        clear() {   // 清空
            this.$emit('clear', '');
        },
        sendMsg(){  // 评论
            if(this.value.length > this.maxlength) {
                this.$message({
                    type:'warning',
                    message:'评论不得超过' + this.maxlength + '字'
                })
                return;
            }
            if(this.value){
                if(getToken()){
                    this.sendTip = '咻~~';
                    // 发送评论
                    this.sendComment();
                    let timer = setTimeout(function(){
                        this.sendTip = '发送~';
                        clearTimeout(timer);
                    },1000)
                }else{
                    MessageBox.confirm('未登录！请先登录', '系统提示', {
                    confirmButtonText: '登录',
                    cancelButtonText: '取消',
                    type: 'warning'
                    }).then(() => {
                        localStorage.setItem('logUrl', router.currentRoute.fullPath);
                        router.push({
                            path: '/Login?login=1'
                        });
                    }).catch(() => { })
                    return Promise.reject('无效的会话，或者会话已过期，请重新登录。')
                }
            }else{
                this.sendTip = '内容不能为空~'
                let timer = setTimeout(function(){
                    this.sendTip = '发送~';
                    clearTimeout(timer);
                },3000)
            }
        },
    },
    created() {
        
    },
}
</script>

<style>
.tmsg-respond h3{
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 8px;
}
.tmsg-respond h3 small{
    font-size: smaller;
    cursor: pointer;
}
.tmsg-respond content{
    background:#f4f6f7;
    margin-bottom: 10px;
}
</style>